<template>
  <view class="business-item-box">
    <view v-if="listLength > 1" class="pro-delete" @click.stop="delFee(itemIndex)">
      <ve-icon name="delete_2" size="40" color="#F53F3F" />
      <text class="fs28 fw400 c5 delete-button">删除</text>
    </view>

    <view class="form-fee-content-content">
      <ve-form-item label="费用金额" unit="元" required :prop="`feeList.${itemIndex}.amount`">
        <ve-input-number @change="changeFeeAmount" v-model="info.amount" :min="0" :max="99999999.99" :precision="2" placeholder="请输入" />
      </ve-form-item>
      <ve-form-item
        label="支出费项"
        required
        :prop="`feeList.${itemIndex}.item`"
        labelTooltipContent="支持在系统管理的系统参数中新增或编辑支出费项"
      >
        <remote-select @change="changeFeeItem" type="cost_fee" v-model="info.item" :label="info.itemName"></remote-select>
      </ve-form-item>
      <ve-form-item label="费用发生时间" required :prop="`feeList.${itemIndex}.occurTime`">
        <ve-date-picker :maxDate="maxDate" v-model="info.occurTime" title="时间"></ve-date-picker>
      </ve-form-item>
      <ve-form-item label="车牌号">
        <!-- 关联工单,业务单 -->
        <ve-picker-inline
          v-if="form.refCostType == 1 || form.refCostType == 2"
          v-model="info.carId"
          placeholder="请选择"
          :range="refCarInfoList"
          unit="arrowRight"
          @change="changeRefInfo"
        >
        </ve-picker-inline>
        <!-- 无关联 -->
        <remote-select
          v-else
          type="licenseNo"
          v-model="info.carId"
          :params="{
            operateStatusList: [10, 20, 30, 40, 50, 60],
          }"
          :label="info.licenseNo"
          @change="changeCarFn"
        />
      </ve-form-item>
      <ve-form-item label="车型">
        <text style="color: #cdced0">{{ info.carModel }}</text>
      </ve-form-item>
      <ve-form-item
        label="凭证"
        required
        :prop="`feeList.${itemIndex}.fileIdList`"
        labelTooltipContent="上传格式:支持jpg、jpeg、png、doc、docx、pdf、xls、xlsx格式，最多支持上传20个。"
        :borderBottom="false"
      >
        <UploadFile
          v-model="info.fileIdList"
          ref="uploadFileRef"
          :fileNum="20"
          :fileTypes="['pdf', 'doc', 'docx', 'xls', 'xlsx']"
          :fileIndex="itemIndex"
        />
      </ve-form-item>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted, inject, computed } from 'vue'
  import dayjs from 'dayjs'
  import { useSysDict } from '@/hooks/useDict'
  import UploadFile from '@/components/upload-file/multiple.vue'

  const sysDict = useSysDict(['insure_business_kind_type'])

  const props = defineProps({
    itemIndex: {
      type: Number,
      default: 0,
    },
    listLength: {
      type: Number,
      default: 0,
    },
    info: {
      type: Object,
      default: () => {},
    },
  })

  const form = inject('form')

  const refCarInfoList = inject('refCarInfoList')

  const maxDate = dayjs().endOf('minute').valueOf()

  const emits = defineEmits(['delete', 'uploadChange', 'changeFee'])

  // 更改费用金额
  const changeFeeAmount = () => {
    emits('changeFee')
  }
  // 更改费项
  const changeFeeItem = (val, option) => {
    form.value.feeList[props.itemIndex].itemName = option.name
  }
  const uploadFileRef = ref()
  // 删除费用信息
  const delFee = () => {
    emits('delete', props.itemIndex)
    uploadFileRef.value.delAllFile()
  }

  const uploadChangefile = (fileList) => {
    emits('uploadChange', fileList)
  }

  // 选择车辆信息
  const changeCarFn = (val, option) => {
    form.value.feeList[props.itemIndex].carModel = option.modelName
    form.value.feeList[props.itemIndex].licenseNo = option.licenseNo
  }
  // 车牌号选中回填车型
  const changeRefInfo = (val) => {
    if (val) {
      let refInfo = refCarInfoList.value.find((i) => i.carId == val)
      form.value.feeList[props.itemIndex].carModel = refInfo.modelName
      form.value.feeList[props.itemIndex].licenseNo = refInfo.licenseNo
    } else {
      form.value.feeList[props.itemIndex].carModel = '-'
    }
  }
</script>

<style lang="less" scoped>
  .form-fee-content-content {
    box-sizing: border-box;
  }
  .pro-delete {
    position: absolute;
    top: 32rpx;
    right: 42rpx;
    display: flex;
    .delete-button {
      margin-left: 14rpx;
    }
  }
  :deep(.ve-popup-content.content-visible) {
    z-index: 999999999 !important;
  }
  :deep(.ve_tooltip__popper) {
    width: 450rpx;
    line-height: 38rpx;
    white-space: normal;
  }
</style>
